<template>
  <div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane
        v-for="(item, index) in tabList"
        :key="index"
        :label="item.label"
        :name="item.name"
      >
        <vxe-grid v-bind="honorsOptions" :height="height">
          <template #pager>
            <!--使用 pager 插槽-->
            <vxe-pager
              v-model:current-page="tablePage.currentPage"
              v-model:page-size="tablePage.pageSize"
              :layouts="[
                'Sizes',
                'PrevJump',
                'PrevPage',
                'Number',
                'NextPage',
                'NextJump',
                'FullJump',
                'Total',
              ]"
              :total="tablePage.total"
              @page-change="handlePageChange"
            />
          </template>
        </vxe-grid>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref, inject, onBeforeMount, onBeforeUnmount } from 'vue'
  import type { TabsPaneContext } from 'element-plus'
  import { honorsOptions } from '../table/column'
  import { getAchievement } from '@/api/postdoctor'

  const activeName = ref('1')
  const tabList = ref([
    {
      label: '授权专利',
      name: '1',
    },
    {
      label: '论文专著',
      name: '2',
    },
    {
      label: '标准',
      name: '3',
    },
    {
      label: '所获资助',
      name: '4',
    },
    {
      label: '国际化培养',
      name: '5',
    },
  ])
  honorsOptions.columns = [
    { title: '序号', type: 'seq', width: 50 },
    { field: 'patentName', title: '专利名称' },
    { field: 'patentNo', title: '专利号' },
    { field: 'type', title: '类别', width: 200 },
    { field: 'date', title: '授权时间', width: 200 },
  ]
  honorsOptions.data = [
    {
      patentName: '一种内陆重度矿坑荒地快速改良方法',
      patentNo: 'ZL202210304872.6',
      type: '发明专利',
      date: '2022-10-16',
    },
  ]
  const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab.props.name)
    switch (tab.props.name) {
      case '1':
        honorsOptions.columns = [
          { title: '序号', type: 'seq', width: 50 },
          { field: 'patentName', title: '专利名称' },
          { field: 'patentNo', title: '专利号' },
          { field: 'type', title: '类别', width: 200 },
          { field: 'date', title: '授权时间', width: 200 },
        ]
        honorsOptions.data = [
          {
            patentName: '一种内陆重度矿坑荒地快速改良方法',
            patentNo: 'ZL202210304872.6',
            type: '发明专利',
            date: '2022-10-16',
          },
        ]
        break

      case '2':
        honorsOptions.columns = [
          { title: '序号', type: 'seq', width: 50 },
          { field: 'dissertationTitle', title: '论文题目' },
          { field: 'publicationName', title: '刊物名称' },
          { field: 'cnNo', title: '国际/国内刊号（ISSN/CN）', width: 200 },
          { field: 'date', title: '发表时间', width: 200 },
        ]
        honorsOptions.data = [
          {
            dissertationTitle: '一种内陆重度矿坑荒地快速改良方法',
            publicationName: '中国专利',
            cnNo: 'ISSN 2075-163X.6',
            date: '2    2022-10-16',
          },
        ]
        break

      case '3':
        honorsOptions.columns = [
          { title: '序号', type: 'seq', width: 50 },
          { field: 'standardName', title: '标准名称' },
          { field: 'standardno', title: '标准代号' },
          { field: 'standardType', title: '标准分类', width: 200 },
          { field: 'date', title: '发表时间', width: 200 },
        ]
        honorsOptions.data = [
          {
            standardName: '机械制图表面粗糙度符号、代号及其注法',
            standardno: 'GB/T 131-2020210304872.6',
            standardType: 'J04',
            date: '2020-1-1',
          },
        ]
        break
      case '4':
        honorsOptions.columns = [
          { title: '序号', type: 'seq', width: 50 },
          { field: 'projectNo', title: '项目批准号' },
          { field: 'projectName', title: '项目名称' },
          { field: 'fundType', title: '项目类别', width: 200 },
          { field: 'money', title: '经费（万元', width: 200 },
          { field: 'date', title: '资助时间', width: 200 },
        ]
        honorsOptions.data = [
          {
            projectNo: '18295801110',
            projectName: '碳的低温氧化形成机制与自爆轰工艺制备纳米核壳结构',
            fundType: '自然科学基金项目',
            money: '50000',
            date: '2022-10-16',
          },
        ]
        break

      case '5':
        honorsOptions.columns = [
          { title: '序号', type: 'seq', width: 50 },
          { field: 'projectName', title: '项目名称' },
          { field: 'projectNo', title: '国外对接机构' },
          { field: 'fundType', title: '国外学习地', width: 200 },
          { field: 'money', title: '经费（万元', width: 200 },
          { field: 'date', title: '培养时间', width: 200 },
        ]
        honorsOptions.data = [
          {
            projectName: '碳的低温氧化形成机制与自爆轰工艺制备纳米核壳结构',
            projectNo: '18295801110',
            fundType: '自然科学基金项目',
            money: '50000',
            date: '2022-10-16',
          },
        ]
        break
    }
  }

  const tablePage = reactive({
    total: 0,
    currentPage: 1,
    pageSize: 10,
  })

  const handlePageChange: VxePagerEvents.PageChange = ({
    currentPage,
    pageSize,
  }) => {
    tablePage.currentPage = currentPage
    tablePage.pageSize = pageSize
    // findList()
  }

  const height = ref(0)
  const $baseTableHeight = inject('$baseTableHeight')
  onBeforeMount(() => {
    window.addEventListener('resize', handleHeight)
  })

  onBeforeUnmount(() => {
    window.removeEventListener('resize', handleHeight)
  })

  const handleHeight = () => {
    height.value = $baseTableHeight(0)
  }
</script>

<style scoped></style>
